<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="head">
<head>
    <meta charset="UTF-8">
    <title>用户商城首页</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script src="../layui/jquery-1.11.3.min.js"></script>
    <style>
        body {
            overflow-x: hidden;
        }

        .header-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #393D49; /* 设置导航栏的背景色 */
            padding: 0;
            margin: 0;
        }

        .header-container ul {
            margin: 0;
            padding: 0;
        }

        .header-container ul li {
            display: inline-block;
            margin-right: 10px;
            line-height: 48px;
        }

        .header-container ul li a {
            color: #fff;
        }

        .header-container ul li a:hover {
            color: #ccc;
        }

        .sidebar-container {
            position: absolute;
            top: 48px; /* 导航栏高度 */
            left: 0;
            width: 200px;
            height: calc(100vh - 48px); /* 导航栏下方的全部空间 */
            background-color: #393D49;
            color: #fff; /* 侧边栏文字颜色 */
            /*padding: 10px;*/
            box-sizing: border-box;
        }

        .content-container {
            margin-left: 200px; /* 侧边栏宽度 */
            padding: 20px;
            margin-top: 48px;
        }
    </style>
</head>
<body>
<div class="header-container">
    <ul class="layui-nav" style="text-align: right;">
        <li class="layui-nav-item">
            <a href="">首页<span class="layui-badge"></span></a>
        </li>
        <li class="layui-nav-item">
            <a href="">我的订单<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item">
            <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="/kamun/user/logout">退出</a></dd>
            </dl>
        </li>
    </ul>
</div>

<div class="content-container">
    <!-- 商品分类界面代码 -->
</div>

<div class="sidebar-container">
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">我要进货</a>
            <dl class="layui-nav-child">
                <!--                <dd><a href="/kamun/product/findAll">购买商品</a></dd>-->
                <dd><a href="javascript:;" class="buy-product" onclick="loadCategoryPage()">购买商品</a></dd>
                <dd><a href="javascript:;">我的收藏夹</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">我的金库</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">我要充值</a></dd>
                <dd><a href="javascript:;">支付密码</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">我的商品</a>
            <dl class="layui-nav-child">
                <dd><a id="product-manager-link">商品管理</a></dd>
                <dd><a id="deliver-link" href="javascript:;">我要发货</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a id="orderDetails-manager-link">订单管理</a></li>
        <li class="layui-nav-item"><a href="">我要反馈</a></li>
        <li class="layui-nav-item"><a href="">关于我们</a></li>
    </ul>
</div>


<script>
    layui.use(['element'], function () {
        var element = layui.element;
        element.render('nav');
    });

    function loadCategoryPage() {
        console.log("点击了购买商品按钮");
        // 使用 AJAX 加载其他页面的内容
        $.ajax({
            url: "/kamun/product/findAll",  // 替换为你要加载的页面的 URL
            type: "GET",
            dataType: "html",
            success: function (response) {
                // 将加载的内容插入到指定的 div 中
                $(".content-container").html(response);
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }

    // 点击购买商品时触发加载商品分类页面的函数
    $("body").on("click", ".buy-product", function () {
        loadCategoryPage();
    });

    // 页面加载完成后自动加载商品分类页面
    $(document).ready(function () {
        loadCategoryPage();
    });

    // 使用 AJAX 加载商品管理页面
    function loadProductManagerPage() {
        console.log("点击了商品管理按钮");
        $.ajax({
            url: "/kamun/product/productmanager",  // 替换为你要加载的商品管理页面的 URL
            type: "GET",
            dataType: "html",
            success: function (response) {
                // console.log(response);
                // 将加载的内容插入到指定的 div 中
                $(".content-container").html(response);
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }

    // 点击商品管理链接时触发加载商品管理页面的函数
    $(document).on("click", "#product-manager-link", function (e) {
        e.preventDefault();
        loadProductManagerPage();
    });


    // 点击订单管理链接时触发加载订单详情页面的函数
    $(document).on("click", "#orderDetails-manager-link", function (e) {
        e.preventDefault();
        loadOrderDetailsPage();
    });

    // 使用 AJAX 加载订单详情页面
    function loadOrderDetailsPage() {
        console.log("点击了订单管理按钮");
        $.ajax({
            url: "/kamun/order/listBySelf",  // 替换为你要加载的订单详情页面的 URL
            type: "GET",
            dataType: "html",
            success: function (response) {
                $(".content-container").html(response);
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }

    function loadDeliverPage() {
        console.log("点击了我要发货按钮");
        $.ajax({
            url: "/kamun/order/selectOrderSend",  // 替换为你要加载的发货页面的 URL
            type: "GET",
            dataType: "html",
            success: function (response) {
                $(".content-container").html(response);
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }

    $(document).on("click", "#deliver-link", function (e) {
        e.preventDefault();
        loadDeliverPage();
    });



</script>
</body>
</html>
